<template>
  <div class="scrollbar-box" :style="{ height: height }">
    <div class="scrollbar-y">
      <div ref="scrollRef" class="scroll-wrap" @scroll="onMosewheel">
        <slot></slot>
      </div>
      <div v-show="heightPre < 1" ref="barRef" class="scrollbar-track">
        <div
          :style="{
            height: barHeight + 'px',
            transform: 'translateY(' + translateY + 'px)',
          }"
          class="scrollbar-thumb"
          @mousedown.stop.prevent="moveStart"
        ></div>
      </div>
    </div>
  </div>
</template>
 
<script>
export default {
  components: {},
  props: {
    height: {
      type: String,
      default: "100%",
    },
  },
  data() {
    return {
      isMove: false,
      trackHeight: 0, // 滚动条轨道高度
      wrapHeight: 0, // 容器高度（可视高度）
      wrapContentHeight: 0, // 内容高度（可滚动内容的高度）
      translateY: 0,
      moveClientY: 0,
      scrollTop: 0,
    };
  },
  computed: {
    barHeight() {
      return this.heightPre * this.trackHeight;
    },
    // 可视高度与内容高度的比例
    heightPre() {
      return this.wrapHeight / this.wrapContentHeight;
    },
  },
  watch: {},
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.initScrollListner();
  },
  activated() {},
  methods: {
    initScrollListner() {
      const scroll = this.$refs.scrollRef;
      const bar = this.$refs.barRef;
      this.wrapContentHeight = scroll.scrollHeight;
      this.wrapHeight = scroll.clientHeight;
      this.trackHeight = bar.clientHeight;
    },
    updateScroll() {
      this.initScrollListner();
    },
    onMosewheel(e) {
      this.scrollY(e.target.scrollTop * this.heightPre);
    },
    scrollY(y) {
      this.translateY = y;
    },
    // 鼠标开始移动
    moveStart(e) {
      this.isMove = true;
      // 开始移动时鼠标距离thumb顶部的位置
      this.moveClientY = e.clientY - this.translateY;
      this.moveTo();
      this.moveEnd();
    },
    // 鼠标移动，改变thumb的位置以及容器scrollTop的位置
    moveTo() {
      document.onmousemove = (e) => {
        if (this.isMove) {
          if (
            e.clientY - this.moveClientY >
            this.trackHeight - this.barHeight
          ) {
            this.translateY = this.trackHeight - this.barHeight;
          } else if (e.clientY - this.moveClientY < 0) {
            this.translateY = 0;
          } else {
            this.translateY = e.clientY - this.moveClientY;
          }
          this.$refs.scrollRef.scrollTop = this.translateY / this.heightPre;
        }
      };
    },
    // 鼠标移动结束
    moveEnd() {
      document.onmouseup = () => {
        if (this.isMove) {
          this.isMove = false;
        }
      };
    },
  },
};
</script>
<style  scoped>
.scrollbar-box {
  height: 600px;
  overflow: hidden;
}
.scrollbar-y {
  position: relative;
  height: 100%;
  margin-right: -17px;
}
.scroll-wrap {
  height: 100%;
  overflow-y: scroll;
}
.scrollbar-thumb {
  position: absolute;
  width: 120%;
  margin: 0 auto;
  height: 5px;
  background-color: #eeeeee;
  border-radius: 50%;
  cursor: default;
  transition: all 0.01s;
}
.scrollbar-track {
  position: absolute;
  top: 0;
  right: 17px;
  bottom: 0;
  width: 5px;
  background-color: orange;
  border-radius: 8px;
  z-index: 20;
}
</style>